<template>
<ScalablePage>
  <div class="left" >
    <div class="dbx-title" v-for="(item, index) in dianbiao" :key="index">
      <img :src="getImg(index + 1)"  style="width: 100%;" />
      <div class="dbx-list">
        <div>AB线电压：{{ item["AB线电压"] }}</div>
        <div>A相电流：{{ item["A相电流"] }}</div>
        <div>BC线电压：{{ item["BC线电压"] }}</div>
        <div>零序电流：{{ item["零序电流"] }}</div>
        <div>CA线电压：{{ item["CA线电压"] }}</div>
        <div>C相电流：{{ item["C相电流"] }}</div>
        <div>有功功率： {{ item["有功功率"] }}</div>
        <div>无功功率：{{ item["无功功率"] }}</div>
      </div>
    </div>
  </div>
</ScalablePage>
</template>

<style src="../styles/dbx.less" />
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; 
import { onMounted, ref, toRefs, reactive } from "vue";

import { prodApi } from "@/utils/shuiwu/api";

const state = reactive({
  dianbiao: [],
});

let { dianbiao } = toRefs(state);

onMounted(() => {
  getShuiKu(630);
});

function getShuiKu(id: number) {
  let json1 = {},
    json2 = {},
    json3 = {},
    json4 = {};
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4852) {
        json1 = { ...json1, ...{ name: "A相电流", A相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4885) {
        json1 = { ...json1, ...{ name: "C相电流", C相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4886) {
        json1 = { ...json1, ...{ name: "零序电流", 零序电流: arr[i].value } };
      }
      if (arr[i].modelId == 4887) {
        json1 = { ...json1, ...{ name: "AB线电压", AB线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4888) {
        json1 = { ...json1, ...{ name: "BC线电压", BC线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4843) {
        json1 = { ...json1, ...{ name: "CA线电压", CA线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4889) {
        json1 = { ...json1, ...{ name: "有功功率", 有功功率: arr[i].value } };
      }
      if (arr[i].modelId == 4890) {
        json1 = { ...json1, ...{ name: "无功功率", 无功功率: arr[i].value } };
      }

      //   2号柜

      if (arr[i].modelId == 4855) {
        json2 = { ...json2, ...{ name: "A相电流", A相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4891) {
        json2 = { ...json2, ...{ name: "C相电流", C相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4892) {
        json2 = { ...json2, ...{ name: "零序电流", 零序电流: arr[i].value } };
      }
      if (arr[i].modelId == 4893) {
        json2 = { ...json2, ...{ name: "AB线电压", AB线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4894) {
        json2 = { ...json2, ...{ name: "BC线电压", BC线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4844) {
        json2 = { ...json2, ...{ name: "CA线电压", CA线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4895) {
        json2 = { ...json2, ...{ name: "有功功率", 有功功率: arr[i].value } };
      }
      if (arr[i].modelId == 4896) {
        json2 = { ...json2, ...{ name: "无功功率", 无功功率: arr[i].value } };
      }

      //   3号柜

      if (arr[i].modelId == 4856) {
        json3 = { ...json3, ...{ name: "A相电流", A相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4897) {
        json3 = { ...json3, ...{ name: "C相电流", C相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4898) {
        json3 = { ...json3, ...{ name: "零序电流", 零序电流: arr[i].value } };
      }
      if (arr[i].modelId == 4899) {
        json3 = { ...json3, ...{ name: "AB线电压", AB线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4900) {
        json3 = { ...json3, ...{ name: "BC线电压", BC线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4845) {
        json3 = { ...json3, ...{ name: "CA线电压", CA线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4901) {
        json3 = { ...json3, ...{ name: "有功功率", 有功功率: arr[i].value } };
      }
      if (arr[i].modelId == 4902) {
        json3 = { ...json3, ...{ name: "无功功率", 无功功率: arr[i].value } };
      }

      //   4号柜

      /* if (arr[i].modelId == 4854) {
        json2 = { ...json2, ...{ name: "A相电流", A相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4879) {
        json4 = { ...json4, ...{ name: "C相电流", C相电流: arr[i].value } };
      }
      if (arr[i].modelId == 4880) {
        json4 = { ...json4, ...{ name: "零序电流", 零序电流: arr[i].value } };
      }
      if (arr[i].modelId == 4881) {
        json4 = { ...json4, ...{ name: "AB线电压", AB线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4882) {
        json4 = { ...json4, ...{ name: "BC线电压", BC线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4842) {
        json4 = { ...json4, ...{ name: "CA线电压", CA线电压: arr[i].value } };
      }
      if (arr[i].modelId == 4883) {
        json4 = { ...json4, ...{ name: "有功功率", 有功功率: arr[i].value } };
      }
      if (arr[i].modelId == 4884) {
        json4 = { ...json4, ...{ name: "无功功率", 无功功率: arr[i].value } };
      } */
    }

    state.dianbiao.push(json1);
    state.dianbiao.push(json2);
    state.dianbiao.push(json3);
//    state.dianbiao.push(json4);
  });
}

function getImg(i: number) {
  return new URL(`../assets/dbx/b${i}.png`, import.meta.url).href;
}
</script>
